<template>
	<div class="pages">
		<!-- 信息上报 -->
		<div class="titlebar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="messageRreport.title"></div>
			</div>
			<div v-if="messageRreport.badge" class="badge" v-text="messageRreport.badge"></div>
		</div>
		<div class="card message-report">
			<div class="chart-container">
				<Echarts :options="messageRreport.options" />
			</div>
			<div class="legend">
				<div v-for="(item, idx) in messageRreport.options.series[0].data" class="item">
					<div class="square" :style="{ 'backgroundColor': messageRreport.options.color[idx] }"></div>
					<div class="content">
						<div class="title" v-text="item.name"></div>
						<div class="value">
							<span v-text="item.value"></span>
							<span>·</span>
							<span v-text="percentage(item.value, messageRreport.options.series[0].data) || 0"></span>
						</div>
					</div>
				</div>
			</div>
			<van-divider />
			<div class="titlebar2">
				<div class="icon">
					<img src="../../assets/imgs/taskCensus/icon-census.png">
				</div>
				<div class="title" v-text="messageRreport.quantityTrend.title"></div>
			</div>
			<div class="legend-date">
				<div class="legend-list">
					<div class="legend-item" v-for="(item, idx) in messageRreport.quantityTrend.options.series">
						<div class="square" :style="{ backgroundColor: item.lineStyle.normal.color }"></div>
						<div class="name" v-text="item.name"></div>
					</div>
				</div>
				<div class="date">
					<van-tabs v-model:active="messageRreport.quantityTrend.tabs.active" @change="tabChange" type="card">
						<van-tab name="year" title="年"></van-tab>
						<van-tab name="month" title="月"></van-tab>
						<van-tab name="week" title="周"></van-tab>
					</van-tabs>
				</div>
			</div>
			<div class="chart-container chart-h">
				<Echarts :options="messageRreport.quantityTrend.options" />
			</div>
		</div>
		<!-- 指令任务 -->
		<div class="titlebar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="instructTask.title"></div>
			</div>
			<div v-if="instructTask.badge" class="badge" v-text="instructTask.badge"></div>
		</div>
		<div class="card instruction-task">
			<div class="tips">
				<span class="label" v-text="instructTask.tips.label"></span>
				<span class="circle">·</span>
				<span class="value" v-text="instructTask.tips.value"></span>
			</div>
			<div class="chart-container">
				<div class="chart">
					<Echarts :options="instructTask.options" />
				</div>
				<div class="legend">
					<div v-for="(item, idx) in instructTask.options.series[0].data" class="item">
						<div class="square" :style="{ 'backgroundColor': instructTask.options.color[idx] }"></div>
						<div class="title" v-text="item.name"></div>
						<div class="split">-</div>
						<div class="value">
							<span v-text="item.value"></span>
							<span class="circle">·</span>
							<span v-text="percentage(item.value, instructTask.options.series[0].data)"></span>
						</div>
					</div>
				</div>
			</div>
			<van-divider class="divider" />
			<div class="titlebar2">
				<div class="icon">
					<img src="../../assets/imgs/taskCensus/icon-census.png">
				</div>
				<div class="title" v-text="instructTask.census1.title"></div>
			</div>
			<div class="census">
				<div class="item bg-green">
					<span class="title">已反馈</span>
					<span class="circle">·</span>
					<span class="value" v-text="instructTask.census1.yfk"></span>
				</div>
				<div class="item bg-yellow">
					<span class="title">待接收</span>
					<span class="circle">·</span>
					<span class="value" v-text="instructTask.census1.djs"></span>
				</div>
				<div class="item bg-red">
					<span class="title">逾期未办理</span>
					<span class="circle">·</span>
					<span class="value" v-text="instructTask.census1.yqwbl"></span>
				</div>
			</div>
			<div class="titlebar2">
				<div class="icon">
					<img src="../../assets/imgs/taskCensus/icon-census.png">
				</div>
				<div class="title" v-text="instructTask.census2.title"></div>
			</div>
			<div class="census">
				<div class="item bg-green">
					<span class="title">已反馈</span>
					<span class="circle">·</span>
					<span class="value" v-text="instructTask.census2.yfk"></span>
				</div>
				<div class="item bg-yellow">
					<span class="title">待接收</span>
					<span class="circle">·</span>
					<span class="value" v-text="instructTask.census2.djs"></span>
				</div>
				<div class="item bg-red">
					<span class="title">逾期未办理</span>
					<span class="circle">·</span>
					<span class="value" v-text="instructTask.census2.yqwbl"></span>
				</div>
			</div>
		</div>
		<!-- 合规提示与统计报表 -->
		<div class="titlebar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="complianceTip.title"></div>
			</div>
			<div v-if="complianceTip.badge" class="badge" v-text="complianceTip.badge"></div>
		</div>
		<div class="card tips-and-report">
			<div class="tips">
				<span class="label" v-text="complianceTip.tips.label"></span>
				<span class="circle">·</span>
				<span class="value" v-text="complianceTip.tips.value"></span>
			</div>
			<div class="chart-container">
				<div class="chart">
					<Echarts :options="complianceTip.options" />
				</div>
				<div class="legend">
					<div v-for="(item, idx) in complianceTip.options.series[0].data" class="item">
						<div class="square" :style="{ 'backgroundColor': complianceTip.options.color[idx] }"></div>
						<div class="title" v-text="item.name"></div>
						<div class="split">-</div>
						<div class="value">
							<span v-text="item.value"></span>
							<span class="circle">·</span>
							<span v-text="percentage(item.value, complianceTip.options.series[0].data)"></span>
						</div>
					</div>
				</div>
			</div>
			<van-divider class="divider" />
			<div class="titlebar2">
				<div class="icon">
					<img src="../../assets/imgs/taskCensus/icon-census.png">
				</div>
				<div class="title" v-text="complianceTip.census.title"></div>
			</div>
			<div class="census">
				<div class="item bg-green">
					<span class="title">已反馈</span>
					<span class="circle">·</span>
					<span class="value" v-text="complianceTip.census.yfk"></span>
				</div>
				<div class="item bg-yellow">
					<span class="title">待接收</span>
					<span class="circle">·</span>
					<span class="value" v-text="complianceTip.census.djs"></span>
				</div>
				<div class="item bg-red">
					<span class="title">逾期未办理</span>
					<span class="circle">·</span>
					<span class="value" v-text="complianceTip.census.yqwbl"></span>
				</div>
			</div>
		</div>
		<!-- 四类任务数据趋势图 -->
		<div class="titlebar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="trendTask.title"></div>
			</div>
			<div v-if="trendTask.badge" class="badge" v-text="trendTask.badge"></div>
		</div>
		<div class="card data-trend">
			<div class="legend">
				<div class="legend-item" v-for="(item, idx) in trendTask.options.series">
					<div class="square" :style="{ backgroundColor: trendTask.options.color[idx] }"></div>
					<div class="name" v-text="item.name"></div>
				</div>
			</div>
			<div class="date">
				<van-tabs v-model:active="trendTask.tabs.active" @change="trendTabChange" type="card">
					<van-tab name="year" title="年"></van-tab>
					<van-tab name="month" title="月"></van-tab>
					<van-tab name="week" title="周"></van-tab>
				</van-tabs>
			</div>
			<div class="chart-container">
				<Echarts :options="trendTask.options" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Echarts from '../../components/Echarts/index.vue'
import '@/styles/font/stylesheet.css'
import { getTaskReportCount, getReportCountBycomp, getInsTaskCount, getComplianceReport, get4Task, getComInstructionCount, getOrgInstructionCount, getComReportCount } from '@/api/taskcensus'

const sum = (chartArr: any) => {
	return chartArr.reduce((pre: any, cur: any, index: any) => {
		return (index === 1 ? pre.value : pre) + cur.value;
	})
}

const percentage = (value: number, chartArr: any) => {
	const tempSum = sum(chartArr);
	return `${Math.round((value / tempSum || 0) * 100)}%`
}

const messageRreport = reactive({
	title: '信息上报',
	quantityTrend: {
		title: '平台企业/监管部门数量趋势',
		tabs: {
			active: 'year'
		},
		options: {
			grid: {
				top: '20%',
				bottom: '20%',
				left: '10%',
				right: "6%"
			},
			tooltip: {
				trigger: "axis",
				backgroundColor: "rgba(38, 104, 255, 0.36)",
				padding: [5, 15]
			},
			xAxis: [
				{
					type: "category",
					boundaryGap: false,
					axisTick: {
						//y轴刻度线
						show: false
					},
					axisLine: {
						lineStyle: {
							color: "#ECECEC", //x轴边框颜色
							width: 1
						}
					},
					axisLabel: {
						margin: 20,
						textStyle: {
							fontSize: 10,
							color: '#646464'
						}
					},
					data: []
				}
			],
			yAxis: [{
				axisLine: {
					show: false
				},
				axisLabel: {
				textStyle: {
					fontSize: 10,
					color: '#646464'
				}
			},
			}],
			series: [
				{
					name: "平台企业",
					type: "line",
					smooth: true,
					symbol: "circle",
					symbolSize: 5,
					showSymbol: false,
					lineStyle: {
						normal: {
							width: 1, //波形图波浪的边框
							// borderWidth: 4,
							color: "rgba(76, 150, 250, 1)"
						}
					},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0, color: 'rgba(76, 150, 250, 0.42)' // 0% 处的颜色
							}, {
								offset: 1, color: 'rgba(76, 150, 250, 0.1)' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					},
					data: []
				},
				{
					name: "监管部门",
					type: "line",
					smooth: true,
					symbol: "circle",
					symbolSize: 5,
					showSymbol: false,
					lineStyle: {
						normal: {
							width: 1, //波形图波浪的边框
							// borderWidth: 4,
							color: "rgba(118, 226, 244, 1)"
						}
					},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0, color: 'rgba(118, 226, 244, 0.47)' // 0% 处的颜色
							}, {
								offset: 0.8, color: 'rgba(118, 226, 244, 0.1)' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					},
					data: []
				}
			]
		}
	},
	badge: 0,
	options: {
		legend: {
			show: false,
			bottom: '0%',
			left: 'center',
			width: '100%',
			// itemGap: 50,
			itemWidth: 14,
			itemHeight: 14,
			textStyle: {
				fontSize: 10,
				color: '#181818'
			},
			orient: 'horizontal',
			lineHeight: 56,
			formatter: (name: any) => {
				const data = messageRreport.options.series[0].data;
				let item = data.filter((i: any) => {
					return i.name == name
				})[0]
				if (!item) return
				let p = Math.round((item.value / sum(messageRreport.options.series[0].data)) * 100)
				return [`${name}`, `${item.value} · ${p}%`].join('\n')
			}
		},
		color: ['#EAB513', '#5BB4F9', '#B085EA', '#4C69DC', '#1FDAE1', '#EB690A'],
		series: [
			{
				type: 'pie',
				radius: ['66%', '90%'],
				center: ['50%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 6
				},
				label: {
					normal: {
						show: true,
						position: 'center',
						color: '#4c4a4a',
						formatter: '{num|' + '0' + '}' + '\n\r' + '{title|' + '信息上报总数' + '}',
						rich: {
							num: {
								fontSize: 50,
								fontFamily: "lcd",
								color: '#1F2E4C',
								fontWeight: '900',
							},
							title: {
								fontFamily: "lcd",
								fontSize: 14,
								color: '#1F2E4C',
								lineHeight: 10,
							},
						}
					},
					emphasis: {//中间文字显示
						show: true,
					}
				},
				lableLine: {
					normal: {
						show: false
					},
					emphasis: {
						show: true
					},
					tooltip: {
						show: false
					}
				},
				data: [
					{ value: 0, name: '合规报告' },
					{ value: 0, name: '违法违规' },
					{ value: 0, name: '主动报告' },
					{ value: 0, name: '意见建议' },
					{ value: 0, name: '工作交流' },
					{ value: 0, name: '其他' },
				]
			}
		]
	} as any,
})

const instructTask = reactive({
	title: '指令任务',
	badge: 0,
	census1: {
		title: '平台企业指令统计',
		yfk: 0,
		djs: 0,
		yqwbl: 0
	},
	census2: {
		title: '监管部门指令统计',
		yfk: 0,
		djs: 0,
		yqwbl: 0
	},
	tips: {
		label: '指令任务总数',
		value: 0
	},
	options: {
		legend: {
			show: false,
			bottom: '0%',
			left: 'center',
			width: '100%',
			// itemGap: 50,
			itemWidth: 14,
			itemHeight: 14,
			textStyle: {
				fontSize: 10,
				color: '#181818'
			},
			orient: 'horizontal',
			lineHeight: 56,
			formatter: (name: any) => {
				const data = instructTask.options.series[0].data;
				let item = data.filter((i: any) => {
					return i.name == name
				})[0]
				if (!item) return
				let p = Math.round((item.value / sum(instructTask.options.series[0].data)) * 100)
				return [`${name}`, `${item.value} · ${p}%`].join('\n')
			}
		},
		color: ['#07A43B', '#1FDAE1', '#507EF6'],
		series: [
			{
				type: 'pie',
				radius: ['62%', '90%'],
				center: ['50%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 6
				},
				label: {
					normal: {
						show: true,
						position: 'center',
						color: '#4c4a4a',
						formatter: '{num|' + '0' + '}' + '\n\r' + '{title|' + '指令任务' + '}',
						rich: {
							num: {
								fontSize: 33,
								fontFamily: "lcd",
								color: '#1F2E4C',
								fontWeight: '900',
							},
							title: {
								fontFamily: "lcd",
								fontSize: 12,
								color: '#1F2E4C',
								lineHeight: 10,
							},
						}
					},
					emphasis: {//中间文字显示
						show: true,
					}
				},
				lableLine: {
					normal: {
						show: false
					},
					emphasis: {
						show: true
					},
					tooltip: {
						show: false
					}
				},
				data: [
					{ value: 120, name: '重点类' },
					{ value: 120, name: '通知类' },
					{ value: 120, name: '特殊类' },
				]
			}
		]
	} as any,
})

const complianceTip = reactive({
	title: '合规提示与统计报表',
	badge: 0,
	census: {
		title: '统计报表数据',
		yfk: 0,
		djs: 0,
		yqwbl: 0
	},
	tips: {
		label: '合规提示总数',
		value: 0
	},
	options: {
		legend: {
			show: false,
			bottom: '0%',
			left: 'center',
			width: '100%',
			// itemGap: 50,
			itemWidth: 14,
			itemHeight: 14,
			textStyle: {
				fontSize: 10,
				color: '#181818'
			},
			orient: 'horizontal',
			lineHeight: 56,
			formatter: (name: any) => {
				const data = complianceTip.options.series[0].data;
				let item = data.filter((i: any) => {
					return i.name == name
				})[0]
				if (!item) return
				let p = Math.round((item.value / sum(complianceTip.options.series[0].data)) * 100)
				return [`${name}`, `${item.value} · ${p}%`].join('\n')
			}
		},
		color: ['#07A43B', '#1FDAE1', '#507EF6'],
		series: [
			{
				type: 'pie',
				radius: ['62%', '90%'],
				center: ['50%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 6
				},
				label: {
					normal: {
						show: true,
						position: 'center',
						color: '#4c4a4a',
						formatter: '{num|' + 0 + '}' + '\n\r' + '{title|' + '合规提示' + '}',
						rich: {
							num: {
								fontSize: 33,
								fontFamily: "lcd",
								color: '#1F2E4C',
								fontWeight: '900',
							},
							title: {
								fontFamily: "lcd",
								fontSize: 12,
								color: '#1F2E4C',
								lineHeight: 10,
							},
						}
					},
					emphasis: {//中间文字显示
						show: true,
					}
				},
				lableLine: {
					normal: {
						show: false
					},
					emphasis: {
						show: true
					},
					tooltip: {
						show: false
					}
				},
				data: [
					{ value: 0, name: '待接收' },
					{ value: 0, name: '未办理' },
					{ value: 0, name: '已反馈' },
				]
			}
		]
	} as any,
})

const trendTask = reactive({
	title: '四类任务数据趋势图',
	badge: 0,
	tabs: {
		active: 'year'
	},
	options: {
		legend: {
			show: false,
			data: ['指令任务', '信息上报', '合规提示', '统计报表']
		},
		grid: {
			top: '10%',
			bottom: '20%',
			left: '10%',
			right: "2%"
		},
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(38, 104, 255, 0.36)",
			padding: [5, 15]
		},
		xAxis: [
			{
				type: "category",
				boundaryGap: true,
				axisTick: {
					//y轴刻度线
					show: false
				},
				axisLine: {
					lineStyle: {
						color: "#ECECEC", //x轴边框颜色
						width: 1
					}
				},
				axisLabel: {
					margin: 20,
					textStyle: {
						fontSize: 10,
						color: '#646464'
					}
				},
				data: []
			}
		],
		yAxis: [{
			axisLine: {
				show: false
			},
			axisLabel: {
				textStyle: {
					fontSize: 10,
					color: '#646464'
				}
			},
		}],
		color: ['#9A63E4', '#354CF7', '#4C96FA', '#76E2F4'],
		series: [
			{
				barWidth: 4,
				itemStyle: {
					normal: {
						barBorderRadius:[2, 2, 0, 0]
					}
				},
				name: '指令任务',
				type: 'bar',
				data: [],
			},
			{
				barWidth: 4,
				itemStyle: {
					normal: {
						barBorderRadius:[2, 2, 0, 0]
					}
				},
				name: '信息上报',
				type: 'bar',
				data: [],
			},
			{
				barWidth: 4,
				itemStyle: {
					normal: {
						barBorderRadius:[2, 2, 0, 0]
					}
				},
				name: '合规提示',
				type: 'bar',
				data: [],
			},
			{
				barWidth: 4,
				itemStyle: {
					normal: {
						barBorderRadius:[2, 2, 0, 0]
					}
				},
				name: '统计报表',
				type: 'bar',
				data: [],
			}
		]
	}
})

const router = useRouter()

// tabs 切换回调
const tabChange = (value: any) => {
	initReportCountBycomp()
}

// tabs 切换回调
const trendTabChange = (value: any) => {
	init4Task()
}

// 初始化信息上报图表
const initTaskReportCount = async () => {
	const res = await getTaskReportCount()
	let data = res.data
	let options = {
		label: {
			normal: {
				show: true,
				position: 'center',
				color: '#4c4a4a',
				formatter: '{num|' + (data.xxsbzs || 0) + '}' + '\n\r' + '{title|' + '信息上报总数' + '}',
				rich: {
					num: {
						fontSize: 50,
						fontFamily: "lcd",
						color: '#1F2E4C',
						fontWeight: '900',
					},
					title: {
						fontFamily: "lcd",
						fontSize: 14,
						color: '#1F2E4C',
						lineHeight: 10,
					},
				}
			},
			emphasis: {//中间文字显示
				show: true,
			}
		},
		data: [
			{ value: data.hgbg || 0, name: '合规报告' },
			{ value: data.wfwg || 0, name: '违法违规' },
			{ value: data.zdbg || 0, name: '主动报告' },
			{ value: data.yjjy || 0, name: '意见建议' },
			{ value: data.gzjl || 0, name: '工作交流' },
			{ value: data.qt, name: '其他' },
		]
	}
	Object.assign(messageRreport.options.series[0], options)
}

// 初始化平台企业/监管部门数量趋势
const initReportCountBycomp = async () => {
	const res = await getReportCountBycomp({ type: messageRreport.quantityTrend.tabs.active })
	let data = res.data
	const xAxisData: any[] = data.map((item: any) => {
		return item.sjsj
	})
	const seriesPtqy: any[] = data.map((item: any) => {
		return item.ptqy
	})
	const seriesJgbm: any[] = data.map((item: any) => {
		return item.jgbm
	})
	let options = {
		xAxis: [
			{
				type: "category",
				boundaryGap: false,
				axisTick: {
					//y轴刻度线
					show: false
				},
				axisLine: {
					lineStyle: {
						color: "#ECECEC", //x轴边框颜色
						width: 1
					}
				},
				axisLabel: {
					margin: 20,
					textStyle: {
						fontSize: 10,
						color: '#646464'
					}
				},
				data: xAxisData
			}
		],
		series: [
			{
				name: "平台企业",
				type: "line",
				smooth: true,
				symbol: "circle",
				symbolSize: 5,
				showSymbol: false,
				lineStyle: {
					normal: {
						width: 1, //波形图波浪的边框
						// borderWidth: 4,
						color: "rgba(76, 150, 250, 1)"
					}
				},
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: 'rgba(76, 150, 250, 0.42)' // 0% 处的颜色
						}, {
							offset: 1, color: 'rgba(76, 150, 250, 0.1)' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}
				},
				data: seriesPtqy
			},
			{
				name: "监管部门",
				type: "line",
				smooth: true,
				symbol: "circle",
				symbolSize: 5,
				showSymbol: false,
				lineStyle: {
					normal: {
						width: 1, //波形图波浪的边框
						// borderWidth: 4,
						color: "rgba(118, 226, 244, 1)"
					}
				},
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: 'rgba(118, 226, 244, 0.47)' // 0% 处的颜色
						}, {
							offset: 0.8, color: 'rgba(118, 226, 244, 0.1)' // 100% 处的颜色
						}],
						global: false // 缺省为 false
					}
				},
				data: seriesJgbm
			}
		]
	}
	Object.assign(messageRreport.quantityTrend.options, options)
}

// 初始化指令任务
const initInsTaskCount = async () => {
	const res = await getInsTaskCount()
	let data = res.data
	instructTask.tips.value = data.zlrwzs
	let options = {
		series: [
			{
				type: 'pie',
				radius: ['62%', '90%'],
				center: ['50%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 6
				},
				label: {
					normal: {
						show: true,
						position: 'center',
						color: '#4c4a4a',
						formatter: '{num|' + (data.zlrwzs || 0) + '}' + '\n\r' + '{title|' + '指令任务' + '}',
						rich: {
							num: {
								fontSize: 33,
								fontFamily: "lcd",
								color: '#1F2E4C',
								fontWeight: '900',
							},
							title: {
								fontFamily: "lcd",
								fontSize: 12,
								color: '#1F2E4C',
								lineHeight: 10,
							},
						}
					},
					emphasis: {//中间文字显示
						show: true,
					}
				},
				lableLine: {
					normal: {
						show: false
					},
					emphasis: {
						show: true
					},
					tooltip: {
						show: false
					}
				},
				data: [
					{ value: data.zdl || 0, name: '重点类' },
					{ value: data.tzl || 0, name: '通知类' },
					{ value: data.tsl || 0, name: '特殊类' },
				]
			}
		]
	}
	Object.assign(instructTask.options, options)
}

const initComInstructionCount = async () => {
	const res = await getComInstructionCount()
	let data = res.data
	instructTask.census1.yfk = data.yfk
	instructTask.census1.djs = data.djs
	instructTask.census1.yqwbl = data.yqwbl
}

const initOrgInstructionCount = async () => {
	const res = await getOrgInstructionCount()
	let data = res.data
	instructTask.census2.yfk = data.yfk
	instructTask.census2.djs = data.djs
	instructTask.census2.yqwbl = data.yqwbl
}

const initComReportCount = async () => {
	const res = await getComReportCount()
	let data = res.data
	complianceTip.census.yfk = data.yfk
	complianceTip.census.djs = data.djs
	complianceTip.census.yqwbl = data.yqwbl
}

// 初始化合规提示与统计报表
const initComplianceReport = async () => {
	const res = await getComplianceReport()
	let data = res.data
	complianceTip.tips.value = data.hgtszs
	let options = {
		series: [
			{
				type: 'pie',
				radius: ['62%', '90%'],
				center: ['50%', '50%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 6
				},
				label: {
					normal: {
						show: true,
						position: 'center',
						color: '#4c4a4a',
						formatter: '{num|' + data.hgtszs + '}' + '\n\r' + '{title|' + '合规提示' + '}',
						rich: {
							num: {
								fontSize: 33,
								fontFamily: "lcd",
								color: '#1F2E4C',
								fontWeight: '900',
							},
							title: {
								fontFamily: "lcd",
								fontSize: 12,
								color: '#1F2E4C',
								lineHeight: 10,
							},
						}
					},
					emphasis: {//中间文字显示
						show: true,
					}
				},
				lableLine: {
					normal: {
						show: false
					},
					emphasis: {
						show: true
					},
					tooltip: {
						show: false
					}
				},
				data: [
					{ value: data.djs || 0, name: '待接收' },
					{ value: data.wbl || 0, name: '未办理' },
					{ value: data.yfk || 0, name: '已反馈' },
				]
			}
		]
	}
	Object.assign(complianceTip.options, options)
}

// 初始化合规提示与统计报表
const init4Task = async () => {
	const res = await get4Task({ type: trendTask.tabs.active })
	let data = res.data
	const xAxisData: any[] = data.map((item: any) => {
		return item.sjsj
	})
	const seriesZlrw: any[] = data.map((item: any) => {
		return item.zlrw
	})
	const seriesXxsb: any[] = data.map((item: any) => {
		return item.xxsb
	})
	const seriesHgts: any[] = data.map((item: any) => {
		return item.hgts
	})
	const seriesTjbb: any[] = data.map((item: any) => {
		return item.tjbb
	})
	let options = {
		xAxis: [
			{
				type: "category",
				boundaryGap: true,
				axisTick: {
					//y轴刻度线
					show: false
				},
				axisLine: {
					lineStyle: {
						color: "#ECECEC", //x轴边框颜色
						width: 1
					}
				},
				axisLabel: {
					margin: 20,
					textStyle: {
						fontSize: 10,
						color: '#646464'
					}
				},
				data: xAxisData
			}
		],
		series: [
			{
				barWidth: 4,
				itemStyle: {
					normal: {
						barBorderRadius:[2, 2, 0, 0]
					}
				},
				name: '指令任务',
				type: 'bar',
				data: seriesZlrw,
			},
			{
				barWidth: 4,
				itemStyle: {
					normal: {
						barBorderRadius:[2, 2, 0, 0]
					}
				},
				name: '信息上报',
				type: 'bar',
				data: seriesXxsb,
			},
			{
				barWidth: 4,
				itemStyle: {
					normal: {
						barBorderRadius:[2, 2, 0, 0]
					}
				},
				name: '合规提示',
				type: 'bar',
				data: seriesHgts,
			},
			{
				barWidth: 4,
				itemStyle: {
					normal: {
						barBorderRadius:[2, 2, 0, 0]
					}
				},
				name: '统计报表',
				type: 'bar',
				data: seriesTjbb,
			}
		]
	}
	Object.assign(trendTask.options, options)
}

onMounted(() => {
	initTaskReportCount()
	initReportCountBycomp()
	initInsTaskCount()
	initComplianceReport()
	init4Task()
	initComInstructionCount()
	initOrgInstructionCount()
	initComReportCount()
})

</script>
<style lang="scss" scoped>
.pages {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 16px 12px;

	//任务待办
	.titlebar {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			display: flex;
			align-items: center;

			.line {
				width: 4px;
				height: 16px;
				margin-right: 8px;
				background-color: $primary-color;
			}

			.text {
				font-weight: 700;
				text-align: left;
				color: #181818;
				line-height: 12px;
			}
		}

		.badge {
			width: 29px;
			height: 16px;
			border-radius: 8.5px;
			background-color: $primary-color;
			text-align: center;
			line-height: 16px;
			font-size: 10px;
			font-weight: bold;
			color: #fff;
		}
	}

	.titlebar2 {
		display: flex;
		align-items: center;
		margin-bottom: 16px;

		.icon {
			margin-right: 8px;

			img {
				width: 12px;
				height: 12px;
			}
		}

		.title {
			font-size: 14px;
			font-weight: bold;
			color: #1f2e4c;
		}
	}

	// 信息上报
	.message-report {
		.chart-container {
			height: 225px;
		}

		.chart-h {
			height: 180px !important;
		}

		.legend {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows: repeat(2, minmax(0, 1fr));
			grid-gap: 20px;
			justify-items: center;

			.item {
				display: flex;

				.square {
					width: 8px;
					height: 8px;
					border-radius: 2.5px;
					margin-right: 8px;
				}

				.content {
					font-size: 10px;
					font-weight: bold;
					color: #1f2e4c;

					.title {
						margin-bottom: 10px;
					}

					.value {}
				}
			}
		}

		.legend-date {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.legend-list {
				display: flex;

				.legend-item {
					display: flex;
					align-items: center;
					margin-right: 12px;

					.square {
						width: 7px;
						height: 7px;
						border-radius: 2.5px;
						margin-right: 5px;
					}

					.name {
						font-size: 10px;
						font-weight: 400;
						color: #273552;
					}
				}
			}

			.date {
				&::v-deep(.van-tabs) {
					.van-tabs__wrap {
						.van-tabs__nav {
							margin: 0;
							background-color: #F8FAFB;
							border-color: #e3e6f1;

							.van-tab {
								padding: 6px 14px;
								border-color: #e3e6f1;
								color: #8F9BB2;
							}

							.van-tab--active {
								background-color: #F8FAFB !important;
								border: 1px solid #3377FF !important;
								color: #3377FF;
							}
						}
					}
				}
			}
		}
	}

	// 指令任务、合规提示及统计报表
	.instruction-task,
	.tips-and-report {

		.tips {
			background: #f6f8ff;
			border-radius: 7.5px;
			margin: 0 50px;
			font-size: 14px;
			font-weight: bold;
			color: #1f2e4c;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 10px 60px;

			.label {
				white-space: nowrap;
			}

			.circle {
				margin: 0 5px;
			}

			.value {
				white-space: nowrap;
			}
		}

		.chart-container {
			display: flex;
			flex-direction: row;
			height: 150px;

			.chart {
				width: 150px;
				height: 100%;
			}

			.legend {
				height: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;

				.item {
					display: flex;
					align-items: center;

					.square {
						width: 14px;
						height: 14px;
						border-radius: 2.5px;
						margin-right: 8px;
					}

					.title {
						font-size: 14px;
						font-weight: bold;
						color: #1f2e4c;
					}

					.split {
						margin: 0 4px;
						font-size: 14px;
						font-weight: bold;
						color: #1f2e4c;
					}

					.value {
						font-size: 14px;
						font-weight: bold;
						color: #1f2e4c;

						.circle {
							margin: 0 4px;
						}
					}
				}
			}
		}

		.divider {
			margin-top: 0;
		}

		.census {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16px;

			&:last-child {
				margin-bottom: 0;
			}

			.item {
				box-sizing: border-box;
				padding: 5px 22px;
				white-space: nowrap;
				font-size: 10px;
				text-align: center;
				color: #1f2e4c;

				.title {}

				.circle {}

				.value {}
			}

			.bg-green {
				background-color: #E9FFEB;
			}

			.bg-yellow {
				background-color: #FFFBED;
			}

			.bg-red {
				background-color: #FFF1F2;
			}
		}
	}



	// 四类任务数据趋势图
	.data-trend {
		.legend {
			border-radius: 7.5px;
			background-color: #F6F8FF;
			box-sizing: border-box;
			padding: 12px 0;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.legend-item {
				display: flex;
				align-items: center;
				.square {
					width: 7px;
					height: 7px;
					border-radius: 2.5px;
					margin-right: 5px;
				}

				.name {
					font-size: 10px;
					font-weight: 400;
					color: #273552;
				}
			}
		}

		.date {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 16px 0;

			&::v-deep(.van-tabs) {
				.van-tabs__wrap {
					.van-tabs__nav {
						margin: 0;
						background-color: #F8FAFB;
						border-color: #e3e6f1;

						.van-tab {
							padding: 6px 14px;
							border-color: #e3e6f1;
							color: #8F9BB2;
						}

						.van-tab--active {
							background-color: #F8FAFB !important;
							border: 1px solid #3377FF !important;
							color: #3377FF;
						}
					}
				}
			}
		}

		.chart-container {
			height: 160px;
		}
	}

	.card {
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		padding: 16px 12px;
		margin: 16px 0;

		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>